<template>
  <router-link 
    to="/" 
    class="school-logo"
    :style="positionStyle"
  >
    <img 
      :src="logoUrl" 
      :alt="altText"
      class="responsive-logo"
      :style="logoStyle"
    >
  </router-link>
</template>

<script>
export default {
  name: 'SchoolLogo',
  props: {
    logoUrl: {
      type: String,
      default: require('@/assets/wyubadge.png')
    },
    altText: {
      type: String,
      default: '武夷学院校徽'
    },
    // 基准尺寸（保持比例的关键参数）
    baseWidth: {
      type: [Number, String],
      default: 150  // 默认基准宽度150px
    },
    // 最大显示尺寸
    maxWidth: {
      type: [Number, String],
      default: 200  // 最大不超过200px
    },
    // 最小显示尺寸
    minWidth: {
      type: [Number, String],
      default: 80   // 最小不小于80px
    },
    // 定位配置
    position: {
      type: Object,
      default: () => ({
        top: '2.5vh',
        left: '2.5vw'
      })
    }
  },
  computed: {
    logoStyle() {
      return {
        width: `${this.baseWidth}px`,
        height: 'auto' // 高度自动保持比例
      }
    },
    positionStyle() {
      return {
        top: this.position.top,
        left: this.position.left
      }
    }
  }
}
</script>

<style scoped>
.school-logo {
  position: absolute;
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.responsive-logo {
  /* 核心缩放逻辑 */
  max-width: v-bind('maxWidth + "px"');
  min-width: v-bind('minWidth + "px"');
  width: v-bind('baseWidth + "px"');
  height: auto;
  object-fit: contain;
  
  /* 视觉优化 */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  image-rendering: -webkit-optimize-contrast;
}

/* 响应式缩放 */
@media screen and (max-width: 1440px) {
  .responsive-logo {
    width: calc(v-bind('baseWidth') * 0.9px);
  }
}

@media screen and (max-width: 1024px) {
  .responsive-logo {
    width: calc(v-bind('baseWidth') * 0.8px);
  }
}

@media screen and (max-width: 768px) {
  .responsive-logo {
    width: calc(v-bind('baseWidth') * 0.7px);
    max-width: 120px;
  }
}

/* 悬停效果 */
.school-logo:hover {
  transform: scale(1.05);
}

.school-logo:hover .responsive-logo {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
</style>